<!-- author: lifeng -->
<!-- time: 2021-03-17 15:01:27 -->
<!-- name：作业井统计 -->

<template>
  <div class="out-div">
    <el-row class="select-row">
      <el-form :model="filterOptions" inline>
        <el-form-item :label="formLabels.workCompany">
          <el-select
            v-model="filterOptions.workCompany"
            :style="selectStyle"
            @change="changeWorkCompany()"
            clearable
          >
            <el-option
              v-for="item in workCompanyOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.area">
          <el-select
            v-model="filterOptions.area"
            :style="selectStyle"
            @change="changeArea()"
            clearable
          >
            <el-option
              v-for="item in areaOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.block">
          <el-select
            v-model="filterOptions.block"
            :style="selectStyle"
            @change="changeBlock()"
            clearable
          >
            <el-option
              v-for="item in blockOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.oilField">
          <el-select
            v-model="filterOptions.oilField"
            :style="selectStyle"
            clearable
          >
            <el-option
              v-for="item in oilFieldOptions"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="formLabels.workDate" style="width: 380px">
          <!-- <el-date-picker
            v-model="defaultWorkDate"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="—"
            style="width: 280px"
          >
          </el-date-picker> -->
          <el-date-picker
            v-model="startDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
            style="width: 140px"
          />
          —
          <el-date-picker
            v-model="endDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
            style="width: 140px"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="top-btn" type="primary" @click="getTableData()"
            >查询数据</el-button
          >
          <el-button class="top-btn" type="primary" @click="moreFilterOptions()"
            >更多条件</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
    <el-drawer
      title="更多查询条件"
      :visible.sync="filterOptionsDialog"
      direction="rtl"
      ref="drawer"
      size="25%"
    >
      <el-divider />
      <el-row class="select-drawer">
        <el-form :model="filterOptions" label-width="140px">
          <el-form-item :label="formLabels.wellType">
            <el-select
              v-model="filterOptions.wellType"
              style="width: 80%"
              clearable
            >
              <el-option
                v-for="item in wellTypeOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="formLabels.wellSpacing">
            <el-select
              v-model="filterOptions.wellSpacing"
              style="width: 80%"
              clearable
            >
              <el-option
                v-for="item in wellSpacingOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
           <el-form-item :label="formLabels.caseSize">
            <el-select
              v-model="filterOptions.caseSize"
              style="width: 80%"
              clearable
            >
              <el-option
                v-for="item in caseSizeOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="formLabels.holeDepth">
            <el-input
              v-model="filterOptions.startDepth"
              placeholder="起始井深"
              style="width: 35%"
              clearable
            />
            —
            <el-input
              v-model="filterOptions.endDepth"
              placeholder="结束井深"
              style="width: 35%"
              clearable
            />
          </el-form-item>
          <el-form-item :label="formLabels.stopTemperature">
            <el-input
              v-model="filterOptions.startBHST"
              placeholder="起始温度"
              style="width: 35%"
              clearable
            />
            —
            <el-input
              v-model="filterOptions.endBHST"
              placeholder="结束温度"
              style="width: 35%"
              clearable
            />
          </el-form-item>
          <el-form-item :label="formLabels.recyleTemperature">
            <el-input
              v-model="filterOptions.startCT"
              placeholder="起始温度"
              style="width: 35%"
              clearable
            />
            —
            <el-input
              v-model="filterOptions.endCT"
              placeholder="结束温度"
              style="width: 35%"
              clearable
            />
          </el-form-item>
          <el-form-item :label="formLabels.holePressure">
            <el-input
              v-model="filterOptions.startBottomTemp"
              placeholder="起始压力"
              style="width: 35%"
              clearable
            />
            —
            <el-input
              v-model="filterOptions.endBottomTemp"
              placeholder="结束压力"
              style="width: 35%"
              clearable
            />
          </el-form-item>
          <el-form-item :label="formLabels.mudDensity">
            <el-input
              v-model="filterOptions.startMudDensity"
              placeholder="起始密度"
              style="width: 35%"
              clearable
            />
            —
            <el-input
              v-model="filterOptions.endMudDensity"
              placeholder="结束密度"
              style="width: 35%"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitDrawer()"
              >确定查询</el-button
            >
            <el-button type="danger" @click="filterOptionsDialog = false"
              >取消查询</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </el-drawer>
    <el-divider />
    <el-row class="table-row">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :span-method="objectSpanMethod"
      >
        <!-- <el-table-column prop="CEMENTCOMPANY" label="作业公司" /> -->
        <el-table-column prop="area" label="区域" width="100"/>
        <el-table-column prop="block" label="区块" width="80"/>
        <el-table-column prop="oilField" label="油田" width="100"/>
        <el-table-column prop="wellName" label="井名" width="100"/>
        <el-table-column prop="wellSpacing" label="井别" width="80"/>
        <el-table-column prop="wellType" label="井型" width="80"/>
        <el-table-column prop="casingSize" label="本层套管尺寸in" width="80"/>
        <el-table-column prop="workType" label="作业类型" width="100"/>
        <el-table-column prop="workDate" label="施工日期" width="100"/>
        <el-table-column prop="casingDepth" label="本层套管下深m" width="80"/>
        <el-table-column prop="holeDepth" label="井深m" width="80"/>
        <el-table-column prop="stopTemp" label="静止温度℃" width="80"/>
        <el-table-column prop="circleTemp" label="循环温度℃" width="80"/>
        <el-table-column prop="exprementItem" label="实验项目" width="80"/>
        <el-table-column prop="bottomPressure" label="井底静压Mpa" width="80"/>
        <el-table-column prop="mudDensity" label="水泥浆密度g/cm3" width="80"/>
        <el-table-column prop="cementEngineer" label="固井工程师" width="100"/>
        <el-table-column prop="operatEngineer" label="操作工程师" width="150"/>
        <el-table-column prop="manipulator" label="操作手" width="100"/>
        <el-table-column prop="operator" label="作业者" width="150"/>
        <el-table-column prop="contractor" label="服务商" width="150"/>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="filterOptions.pageIdx"
          :page-size="filterOptions.pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
        />
      </div>
      <div class="pagination-base">
        <el-input v-model="sum" placeholder="统计"></el-input>
      </div>
    </el-row>
  </div>
</template>

<script>
import { Drawer, Divider } from 'element-ui'
import {
  GetWorkWellData,
  GetWorkCompany,
  GetAreaData,
  GetBlockData,
  GetOilField,
  GetWellType,
  GetWellSpacing,
  GetCaseSize
} from '../../../api/module/dataAnalysis'

export default {
  components: { elDivider: Divider, elDrawer: Drawer },
  data() {
    return {
      formLabels: {
        workCompany: '作业公司',
        area: '区域',
        block: '区块',
        oilField: '油田',
        wellSpacing: '井别',
        wellType: '井型',
        caseSize: '套管尺寸',
        workDate: '施工日期',
        holeDepth: '井深(m)',
        stopTemperature: '静止温度(℃)',
        recyleTemperature: '循环温度(℃)',
        holePressure: '井底静压(Mpa)',
        mudDensity: '水泥浆密度(g/cm3)',
      },
      selectStyle: { width: '160px' },
      areaOptions: [],
      blockOptions: [],
      oilFieldOptions: [],
      workCompanyOptions: [],
      wellTypeOptions: [],
      wellSpacingOptions: [],
      caseSizeOptions: [],
      filterOptions: {
        pageNum: 1,
        pageSize: 10,
      },
      filterOptionsDialog: false,
      tableData: [],
      defaultWorkDate: '',
      startDate: '',
      endDate: '',
      spanArr1: [],
      spanArr2: [],
      total: 0,
      loading: false,
      sum:'',
    }
  },
  beforeMount() {
    this.handleGetDefaultDate()
  },
  mounted() {
    this.handleGetWorkCompanyOptions()
    this.handleGetWellTypeOptions()
    this.handleGetWellSpacingOptions()
      this.handleGetCaseSizeOptions()
    // this.handleGetTableData()
  },
  methods: {
    /* 默认查询时间 */
    handleGetDefaultDate(flag = true) {
      if (flag) {
        let now = new Date()
        let year = now.getFullYear()
        let month = now.getMonth()
        let day = now.getDate()
        // this.defaultWorkDate = [
        //   `${year - 5}-${month + 1}-${day}`,
        //   `${year}-${month + 1}-${day}`,
        // ]
        this.startDate = `${year - 5}-${month + 1}-${day}`
        this.endDate = `${year}-${month + 1}-${day}`
      }
      // this.filterOptions.stratDate = `${this.defaultWorkDate[0]} 00:00:00`
      // this.filterOptions.endDate = `${this.defaultWorkDate[1]} 23:59:59`
    },
    handleGetDefaultWorkDate() {
      this.filterOptions.stratDate = `${this.startDate} 00:00:00`
      this.filterOptions.endDate = `${this.endDate} 23:59:59`
    },
    /* 查询列表数据 */
    handleGetTableData() {
      // if (this.defaultWorkDate) {
      if (this.startDate || this.endDate) {
        this.handleGetDefaultWorkDate()
      } else {
        delete this.filterOptions.stratDate
        delete this.filterOptions.endDate
      }
      if (
        (this.startDate && this.endDate) ||
        (!this.startDate && !this.endDate)
      ) {
        console.log(this.filterOptions)
        this.loading = !this.loading
        GetWorkWellData(this.filterOptions)
          .then((res) => {
            console.log(res.data.data)
            this.tableData = res.data.data.workWell
            this.total = res.data.data.totalNum
            this.getSpanArr(this.tableData)
            this.loading = !this.loading
            this.sum="统计    作业井数:"+res.data.data.wellNum+"        作业套管数:"+res.data.data.totalNum
          })
          .catch((e) => {
            this.loading = !this.loading
            this.tableData = []
            this.$message.error('未查询到列表数据！')
          })
      } else {
        this.$message.error('施工日期不能只选一个，请检查！')
      }
    },
    /* 查询筛选条件数据事件 */
    handleGetWorkCompanyOptions() {
      GetWorkCompany()
        .then((res) => {
          this.workCompanyOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    changeWorkCompany() {
      this.handleGetAreaOptions()
    },
    handleGetAreaOptions() {
      GetAreaData(this.filterOptions.workCompany)
        .then((res) => {
          this.areaOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到区域数据！')
        })
    },
    changeArea() {
      this.handleGetBlockOptions()
    },
    handleGetBlockOptions() {
      GetBlockData(this.filterOptions.workCompany, this.filterOptions.area)
        .then((res) => {
          this.blockOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到区块数据！')
        })
    },
    changeBlock() {
      this.handleGetOilFieldOptions()
    },
    handleGetOilFieldOptions() {
      GetOilField(
        this.filterOptions.workCompany,
        this.filterOptions.area,
        this.filterOptions.block
      )
        .then((res) => {
          this.oilFieldOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到油田数据！')
        })
    },
    handleGetWellTypeOptions() {
      GetWellType()
        .then((res) => {
          this.wellTypeOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到井型数据！')
        })
    },
    handleGetCaseSizeOptions() {
      GetCaseSize()
        .then((res) => {
          this.caseSizeOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到井型数据！')
        })
    },
    handleGetWellSpacingOptions() {
      GetWellSpacing()
        .then((res) => {
          this.wellSpacingOptions = res.data.data
        })
        .catch((e) => {
          this.$message.error('未查询到井别数据！')
        })
    },
    /* 按钮的事件 */
    getTableData() {
      this.handleGetTableData()
    },
    moreFilterOptions() {
      this.filterOptionsDialog = true
    },
    submitDrawer() {
      this.handleGetTableData()
      this.filterOptionsDialog = false
    },
    handlePageChange(page) {
      this.filterOptions.pageNum = page
      this.handleGetTableData()
    },
    /* 合并表格 */
    getSpanArr(data) {
      this.spanArr1 = []
      this.spanArr1.push(1)
      let pos1 = 0
      this.spanArr2 = []
      this.spanArr2.push(1)
      let pos2 = 0
      for (let i = 1; i < data.length; i++) {
        let flag1 = data[i].wellName === data[i - 1].wellName
        let flag2 = data[i].casingSize === data[i - 1].casingSize
        if (flag1) {
          this.spanArr1[pos1]++
          this.spanArr1[i] = 0
        } else {
          this.spanArr1[i] = 1
          pos1 = i
        }
        if (flag1 && flag2) {
          this.spanArr2[pos2]++
          this.spanArr2[i] = 0
        } else {
          this.spanArr2[i] = 1
          pos2 = i
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      console.log(this.spanArr1)
      console.log(this.spanArr2)
      if (columnIndex in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
        if (columnIndex in [0, 1, 2, 3, 4, 5]) {
          return {
            rowspan: this.spanArr1[rowIndex],
            colspan: this.spanArr1[rowIndex] > 0 ? 1 : 0,
          }
        } else {
          return {
            rowspan: this.spanArr2[rowIndex],
            colspan: this.spanArr2[rowIndex] > 0 ? 1 : 0,
          }
        }
      }
    },
  },
}
</script>

<style scoped>
.out-div {
  margin: 0px;
}
/* .select-row {
} */
.el-divider--horizontal {
  margin: -10px 0 10px 0;
}
.select-drawer {
  padding: 10px;
}
</style>
